<template>
	<view :style="[AppSkinVar]">
		<view class="search-input ">
			<u-search height="40" :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('layout.请输入关键词')" v-model="keyword" @search="reset"></u-search>
		</view>
		<empty :text="$t('classify.暂无内容')" :icon="$staticPath('default_img.png')" :show="emptyShow"></empty>
		<yuncangGoodsList :list="goodsList" :showLoad="showLoad" v-if="type === '1'"></yuncangGoodsList>
		<template v-else>
			<yuncangGoodsCard :priceShow="false" :isJump="true" :goodsId="item.id" :goods="item.params.product" v-for="item in goodsList" :key="item.id"></yuncangGoodsCard>
			<load-more v-if="goodsList.length" :showLoad="showLoad"></load-more>
		</template>
	</view>
</template>

<script>
import yuncangGoodsList from './child/goods-list.vue'
import yuncangGoodsCard from './child/yuncang-goods-card.vue'
import { getYuncangGoodsList, getStockGoodsList } from 'api/yuncang.js'
export default {
	components: {
		yuncangGoodsList,
		yuncangGoodsCard
	},
	data() {
		return {
			type: '',
			keyword: '',
			goodsList: [],
			pageNum: 1,
			showLoad: false,
			isGet: true
		}
	},
	computed: {
		emptyShow() {
			return !this.goodsList.length
		}
	},
	onLoad({ keyword, type }) {
		this.keyword = keyword
		this.type = type || '1'
		this.getGoodsData()
	},
	onReachBottom() {
		this.getGoodsData()
	},
	methods: {
		getGoodsData() {
			if (this.isGet && !this.showLoad) {
				let api = this.type === '1' ? getGoodsList : getStockGoodsList
				this.showLoad = true
				api({
					pageSize: 10,
					pageNum: this.pageNum,
					name: this.keyword
				}).then(res => {
					this.showLoad = false
					if (res.code === 200) {
						let loadRes = this.$pageLoad(this.goodsList, res.rows, this.pageNum, 10)
						this.pageNum = loadRes.pageNo
						if (this.goodsList.length == res.total) {
							this.isGet = false
						}
					}
				})
			}
		},
		reset() {
			this.goodsList = []
			this.pageNum = 1
			this.isGet = true
			this.getGoodsData()
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.search-input {
	padding: 30rpx 22rpx;
}
.keyword {
	padding: 0 30rpx;
	.title {
		padding: 24rpx 0;
	}
	.keyword-text {
		padding: 10rpx 20rpx;
		background: #f9f9fb;
		border-radius: 36rpx;
	}
}
.store-list,
.goods-list {
	height: calc(100vh - 210rpx);
}
.goods-list {
	background-color: #f7f7f7;
}
</style>
